<template>
  <div class="mapBox">
    <div>在vue2中使用leaflet渲染线</div>
    <!-- 地图容器 -->
    <div id="lineMap"></div>
  </div>
</template>

<script>
  import lineData from '@/utils/data.js' // 模拟数据
  import GPS from '@/utils/change.js' // 解决坐标偏移
  export default {
    name: 'LeafletLine',
    data() {
      return {
        mapLine: null,
        dataArr: []
      }
    },
    mounted() {
      // 地图初始化
      lineData.lineData.forEach((i) => {
        let item = i[0]
        i[0] = i[1]
        i[1] = item
        i = GPS.gcj_encrypt(
          Number(i[0]),
          Number(i[1])
        )
        this.dataArr.push(i)
      })
      this.initMap()
    },
    methods: {
      // 使用id为map的div容器初始化地图，同时指定地图的中心点和缩放级别
      initMap() {
        let map = L.map("lineMap", {
          center: [24.485666, 118.0865615286], // 中心位置
          zoom: 12, // 缩放等级
          attributionControl: true, // 版权控件
          zoomControl: true //缩放控件
        });
        this.mapLine = map; // data上需要挂载
        L.tileLayer(
          "http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"
        ).addTo(map) // 加载底图
        let polyline = L.polyline(this.dataArr, { // 点的集合
          weight: 6, //线宽
          opacity: 1, //透明度
          color: "blue", //颜色
        }).addTo(map);
      }
    }
  }
</script>
<style scoped>
  #lineMap {
    width: 800px;
    height: 500px;
    margin: 50px auto;
  }

  .lmap-image {
    width: 32px;
    height: 32px;
  }

  .lmap-span {
    display: inline-block;
    margin-left: 5px;
    padding: 5px;
    font-weight: bold;
    /* 	background: #66cdb1; */
    line-height: 20px;
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
  }

  .lmap-text {
    display: inline-block;
    margin-left: 5px;
    padding: 5px;
    font-weight: bold;
    /* 	background: #66cdb1; */
    line-height: 20px;
    font-size: 16px;
    color: #fff;
    width: 500px;
    white-space: nowrap;
    position: absolute;
    text-align: center;
    top: 25px;
    left: -250px;
  }
</style>
